<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<head>
<title>_库存预警</title>
<script type="text/javascript">
	var datatable_content;
	var filterParam = {};
	function initTable(){
		datatable_content = $("#contentTable").dataTable({
		   "bServerSide":true,
		   "bAutoWidth":false,
           "sAjaxSource":'${ctx}/v2/cusStockSafe/query',
           "fnServerData": callback,
           "fnRowCallback":rowCallBack,
           "bFilter": false,
           "bSort": false,
           "sZeroRecords": "查询无记录！",
           "bProcessing": true,
           "oLanguage": {
               "sUrl": '${ctx}/static/v2/js/plugins/datatables/cn.txt'
            },
             "aoColumns":[
             	 {"mData": null},
             	 {"mData": "customer.customerName"},
             	 {"mData": null},
             	 {"mData": "sku"},
             	 {"mData": "salesNum"},
             	 {"mData": null},
             	 {"mData": null},
             	 {"mData": null},
             ],
             "aoColumnDefs":[
             	{"aTargets": [2],
	              "mRender": function (data, display, row) {
						return getWarehouseName(row.warehouseCode);
		           }
	            },
             	{"aTargets": [5],
	              "mRender": function (data, display, row) {
	              		var s =("<input class=\"form-control pull-right required digits\" type=\"text\" value=\""+(row.safeNum ? row.safeNum : 0)+"\" name=\"txt_"+row.customer.customerCode+"_"+row.warehouseCode+"_"+row.sku +"\" id=\"txt_"+row.customer.customerCode+"_"+row.warehouseCode+"_"+row.sku+"\"/>");
						return "<input class=\"form-control pull-right required digits\" type=\"text\" value=\""+(row.safeNum ? row.safeNum : 0)+"\" name=\"txt_"+row.customer.customerCode+"_"+row.warehouseCode+"_"+row.sku +"\" id=\"txt_"+row.customer.customerCode+"_"+row.warehouseCode+"_"+row.sku+"\"/>";
		           }
	            },
             	{"aTargets": [6],
	              "mRender": function (data, display, row) {
						if(row.safeNum){
							if(row.safeNum >= row.salesNum){
								return "<img src=\"${ctx}/static/images/org.png\" title=\"waring\" />";
							}else{
								return "<img src=\"${ctx}/static/images/yellow.png\" title=\"safe\" />";
							}
						}
						return "";
		           }
	            },
             	{"aTargets": [7],
	              "mRender": function (data, display, row) {
						return "<button type=\"button\" id=\"btn_"+row.customer.customerCode+"_"+row.warehouseCode+"_"+row.sku +"\" class=\"btn btn-primary\" onclick=\"save('"+row.customer.customerCode+"','"+row.warehouseCode+"','"+row.sku+" ')\">修改</button>"+
								"<img id=\"img_"+row.customer.customerCode+"_"+row.warehouseCode+"_"+row.sku +"\" src=\"${ctx}/static/images/checkSmall.gif\" class=\"img-circle\" alt=\"success\" hidden=\"true\"/>"+
								"<input type=\"hidden\" id=\"safe_"+row.customer.customerCode+"_"+row.warehouseCode+"_"+row.sku +"\" value=\""+row.safeId +"\">";
		           }
	            },
             ],
		});
	}
	
	function filter(item){
		filterParam[item.name] = item;
	}
	function callback(sSource, aoData, fnCallback ) {
	   	var formParam = $("#queryForm").serializeArray();
		for(var n in filterParam){
			formParam.push(filterParam[n]);
		}
	   $.ajax({ 
	       "type": "post",
	       "contentType": "application/json", 
	       "url": sSource,    
	       "dataType": "json",   
	       "data": JSON.stringify(aoData.concat(formParam)),
	       "success": fnCallback  
	   });
	}
	
	/**
	*创建了行的回调
	*nRow为当前的tr
	*/
	function rowCallBack(nRow, aData, iDisplayIndex, iDisplayIndexFull){
		var iDisplayStart = datatable_content.fnSettings()._iDisplayStart;
		$("td:eq(0)", nRow).html(iDisplayStart+iDisplayIndex+1);
		nRow.id = "tr_"+aData.id;
	}
	
	function load(){
		if(datatable_content){
			datatable_content.fnDestroy();
		}
		initTable();
	}
	$(function() {
		$("#queryForm").validate(); 
		$("#dataForm").validate(); 
	});
	
	function getCustomerName(customerCode){
		<c:forEach items="${customerList}" var="item">
			if("${item.customerCode}" == customerCode){
				return "${item.customerName}";
			}
		</c:forEach>
	}
	
	function getWarehouseName(groupCode){
		<c:forEach items="${warehouseList}" var="item">
			if("${item.groupCode}" == groupCode){
				return "${item.groupName}";
			}
		</c:forEach>
	}
		/*
		*保存安全库存
		*/
		function save(customerCode,wareHouseCode,sku){
			if($("#dataForm").valid()){
				var tempId = customerCode+"_"+wareHouseCode+"_"+sku;
				var id = $("#safe_"+tempId).val() == "0" ? null : $("#safe_"+tempId).val();
				$.ajax({
					type : 'post',
					url  : '${ctx}/v2/cusStockSafe/saveSafe',
					data : {
						id:id,
						customerCode:customerCode,
						warehouseCode:wareHouseCode,
						sku:sku,
						safeNum:$("#txt_"+tempId).val()
						},
					dataType : 'json',
					success : function(data) {
						$("#safe_"+tempId).val(data.id);
						showMessage(tempId);
					},
					error : function() {
						alert("修改数据错误！");
					}
				});
			}
		}
		function showMessage(id) {
			$("#img_"+id).show('fast',function(){
				$(this).hide(2000);
			});
		}
		function query(flag){
			if($("#queryForm").valid()){
				$("#flag").val(flag);
				load();
			}
		}
</script>
</head>
<body>
<section class="content">
	<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-search"></i>
					<h3 class="box-title">搜索栏</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse" type="button">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
				<form class="form-search" id="queryForm" action="${ctx}/v2/cusStockSafe/toPage" method="post">
					<div class="form-group row">
						<div class="col-sm-4">
							<div class="input-group col-sm-12">
								<span class="input-group-text"> 商家名称： </span> 
								<select class="form-control required" id="_customerCode" name="_EQ_customer.customerCode" onchange="ajaxAreaGroup(this,'_warehouseCode')">
									<option value=""></option>
									<c:forEach items="${customerList}" var="customer" >
										<option value="${customer.customerCode}"
											<c:if test="${param['_EQ_customer.customerCode'] eq customer.customerCode}">selected=selected</c:if>>${customer.customerName}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="input-group col-sm-12">
								<span class="input-group-text"> 入库仓库： </span> 
								<select class="form-control span3" id="_warehouseCode" name="_EQ_warehouseCode">
									<option value=""></option>
									<c:forEach items="${warehouseList}" var="warehouse">
										<option value="${warehouse.groupCode}"
											<c:if test="${param._EQ_warehouseCode eq warehouse.groupCode }">selected=selected</c:if>>${warehouse.groupName}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						
						<div class="col-sm-4">
							<div class="input-group col-sm-12">
								<span class="input-group-text"> SKU： </span> 
								<input class="form-control span3" id="_sku" name="_LIKE_sku" value="${param._LIKE_sku }"/>
							</div>
						</div>

					</div>
					<div class="form-group row">
						<div class="col-sm-4">
							<div class="input-group col-sm-12">
								<input type="hidden" id="flag" name="flag" value="${param.flag }">
								<button class="btn btn-info" type="button" onclick="query('query')">查询</button>
								<button class="btn btn-info" type="button" onclick="query('warning')">预警商品</button>
							</div>
						</div>
					</div>
				</form>
				</div>

			</div>
			<!-- /.box-body -->

		</div>
		<!-- /.col -->
	</div>
	<!-- /.row -->

	<div class="form-group row">
		<div class="col-md-12">
			<div class="box box-primary">
				<div class="box-header"></div>
				<div class="box-body">
				<form id="dataForm">
					<table id="contentTable" class="table table-striped table-bordered table-condensed">
						<thead>
							<tr>
								<th>序号</th>
								<th>商家</th>
								<th>仓库</th>
								<th>SKU</th>
								<th>当前库存</th>
								<th>安全库存</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
					</form>
				</div>
			</div>
			<!-- /.box -->
		</div>
		<!-- /.col -->
	</div>
	<!-- /.row -->
</section>	
</body>
</html>